@import '../../../index.scss';


.container {

  .navbar {

    // background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: #fff;

    .capsule {
      // background-color: orange;
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      background-color: #fff;

      // background-color: red;
      // border-bottom: 1px solid #f8f8f8;
      .van-search {
        padding-bottom: 0;
        padding-top: 0;
      }
    }


  }

  .hotStore {
    width: 100%;
    height: 100%;

    .swiper {
      height: 420rpx;
      // background-color: #ccc;

      .item {
        padding: 0 10rpx;

        .cover {
          width: 100%;
          height: 310rpx;
          border-radius: 14rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .box {
          .name {
            font-size: 38rpx;
            line-height: 1.3;
            font-weight: bold;
            margin-top: 10rpx;
            width: 50%;
          }
        }
      }
    }
  }

  .classify {
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 14rpx;
    box-sizing: border-box;
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      // padding: 20rpx 0;
      box-sizing: border-box;
      // box-shadow: 0rpx 0rpx 16rpx 8rpx rgba(0, 0, 0, 0.04);
      // background-color: #f8f8f8;
      position: relative;
      box-shadow: inset 1rpx 1rpx 16rpx 1rpx rgba(0, 0, 0, 0.04);


      &.item:nth-child(-n+4) {
        grid-column: span 2;
        // padding: 10rpx 0;

        /* 前4个项目占据两列 */
        image {
          // height: 100rpx;
          width: 80%;
          left: 10%;
          top: 50%;
          transform: translateY(-60%);
        }
      }

      .cover {
        // height: 100rpx;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        // height: 60rpx;
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        // background-color: $primary-color;
        // background-color: #f8f8f8;
        // border-radius: 10rpx;

        image {
          // height: 88rpx;
          // width: 100%;
          width: 90%;
          height: 90%;
          left: 5%;
          top: 5%;
          position: absolute;

        }
      }

      .name {
        font-size: 28rpx;
        position: absolute;
        bottom: 10rpx;
        color: #666;


      }
    }
  }

  .commodity {
    padding: 20rpx 30rpx;
    box-sizing: border-box;

    .tabber {
      display: flex;

      margin-bottom: 30rpx;

      .list {
        flex: 1;
        text-align: center;
        // font-size: 26rpx;
        padding-bottom: 20rpx;
        border-bottom: 2px solid #ccc;
        color: #787878;

        &.active {
          border-bottom: 2px solid #000;
          color: #000;
          font-weight: bold;

        }
      }
    }

    .box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20rpx;

      .item {
        border-radius: 12rpx;
        overflow: hidden;
        box-shadow: 0rpx 2rpx 30rpx 8rpx rgba(0, 0, 0, .1);

        .cover {
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          position: relative;
          background-color: #eee;

          image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }

        .cont {
          padding: 16rpx;
          box-sizing: border-box;

          .nikename {
            font-size: 24rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 4.8em;
            /* 假设每行文本高度大约为2.4em */
            line-height: 1.2em;
            /* 设置行高 */
          }

          .price {
            font-size: 26rpx;
            color: #666;
            padding-top: 10rpx;
          }
        }
      }
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      padding-bottom: 20rpx;

      .btn {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        padding: 10rpx 30rpx;
        border-radius: 100px;
        border: 1px solid #000;
        color: #666;

        image {
          height: 30rpx;
          margin-right: -10rpx;
        }
      }
    }
  }

  .tops {

    .header {
      padding: 20rpx 30rpx;

      .title {
        font-size: 42rpx;
        font-weight: bold;
      }
    }

    .box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20rpx;
      padding: 20rpx 30rpx;
      box-sizing: border-box;

      .item {
        height: 460rpx;
        border-radius: 20rpx;
        overflow: hidden;
        position: relative;
        box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);

        .cover {
          width: 100%;
          height: 100%;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .nikename {
          position: absolute;
          bottom: 30rpx;
          // left: 50%;
          // transform: translateX(-50%);
          // width: 76%;
          width: 100%;

          text-align: center;
          font-size: 24rpx;

          text {
            padding: 6rpx 30rpx;
            border-radius: 100rpx;

            background-color: #fff;
          }
        }
      }
    }
  }


}